<template>
  <div v-bind="$attrs" class="card-con" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'"

    :style="{border: isCardBorder?'1px solid #ebeef5':''}">
    <div class="card-head" v-if="$slots.header || header" :style="{'border-bottom': isHeadBottomBorder?'1px solid #ebeef5':''}">
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="card-body" :style="bodyStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PCard',
  props: {
    // 表示是否显示外围边框
    isCardBorder:true,
    isHeadBottomBorder:true,
    header: {},
    bodyStyle: {},
    shadow: {
      type: String  //  always  hover  never
    }
  }
}
</script>

<style lang="less">
.card-con {
  width: 100%;
  // height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-radius: 4px;
  // border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: .3s;

  .card-head {
    width: 100%;
    padding: 18px 20px;
    // border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }

  .card-body {
    padding: 20px;
    flex: 1;
  }
}

// .card-con,
// .card-con:focus,
// .card-con:hover {
//   box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
// }

.card-con.is-always-shadow,
.card-con.is-hover-shadow:focus,
.card-con.is-hover-shadow:hover {
  box-shadow:  1px 3px 5px #0000001a;
}
</style>
